import React from 'react';
import { Modal, Form, Icon, message, TreeSelect, Button, Input, Select, DatePicker, Checkbox, InputNumber } from 'antd';
import { connect } from 'umi';
import BraftEditor from 'braft-editor';
import 'braft-editor/dist/index.css';
import { FormContainer } from '@/components/UserForm';
import { get as getPath } from 'object-path';
import moment from 'moment/moment';
import FileUpload from '@/components/Custom/FileUpload';
import { customUpload } from '@/utils/fileUpload';
import { debounce } from 'lodash';
import styles from './index.less';
import { getEmployeeList, frontTask, relateTaskList } from '../../services';
import RelativeLink from '../RelativeLink';
import TaskListItem from '../TaskListItem';
import { TimeFormatForm, TaskPriorityList } from '../../utils';

const { Option } = Select;

const formLayout = {
    wrapperCol: { span: 18 },
    labelCol: { span: 6 }
};

// 不允许添加尺寸大于10M的文件
const myValidateFn = file => {
    if (file.size > 1024 * 1024 * 10) {
        message.error('图片不能大于10M！');
        return false;
    }
    return true;
};

const ChildTaskMore = ({ form, visible, setVisible, user, onOk, taskDetail, onCancel }) => {
    // console.log('ChildTaskMore -> taskDetail', taskDetail);
    // console.log('ChildTaskMore -> parentEndTime', parentEndTime);
    const { getFieldDecorator } = form;
    const isFirstRun = React.useRef(true);
    const [employeeList, setEmployeeList] = React.useState([]);
    const [startMode, setStartMode] = React.useState(
        getPath(taskDetail, 'planStartTime') && getPath(taskDetail, 'planStartTime').indexOf('00:00:00') === -1
            ? 'time'
            : 'date'
    );
    const [endMode, setEndMode] = React.useState(
        getPath(taskDetail, 'planEndTime') && getPath(taskDetail, 'planEndTime').indexOf('23:59:59') === -1
            ? 'time'
            : 'date'
    );
    const [startDate, setStartDate] = React.useState('');
    const [endDate, setEndDate] = React.useState('');
    const startDateRef = React.useRef(false);
    const endDateRef = React.useRef(false);
    const [workTime, setWorkTime] = React.useState('小时 (0天0小时0分钟)');
    const [advanceAlert, setAdvanceAlert] = React.useState(1);
    const [frontList, setFrontList] = React.useState([]);
    const [relateTask, setRelateTask] = React.useState([]);
    const linkRef = React.useRef();
    const relativeLinkData = ((taskDetail && taskDetail.relateLinkList) || []).map((item, index) => ({
        key: index + 1,
        link: item
    }));
    const [disabled, setDisabled] = React.useState(false);
    const [fileList, setFileList] = React.useState([]);
    const [uploadResource, setUploadResource] = React.useState(null);

    const handleOk = () => {
        // console.log('===============================================>ok');
        // console.log(form.getFieldsValue());
        form.validateFields(async (err, values) => {
            if (!err) {
                const { taskDesc } = values;

                if (values.taskDesc && values.taskDesc.toHTML().length > 20000) {
                    message.error('任务描述内容过多');
                    return;
                }
                const newLinkList =
                    values.relateLinkList &&
                    values.relateLinkList.filter(item => item.link && item.link.length > 0).map(item => item.link);

                const params = {
                    ...values,
                    planStartTime:
                        startDate ||
                        (values.planStartTime &&
                            values.planStartTime.format(
                                startMode === 'date' ? 'YYYY-MM-DD 00:00:00' : 'YYYY-MM-DD HH:mm:ss'
                            )) ||
                        '',
                    planEndTime:
                        endDate ||
                        (values.planEndTime &&
                            values.planEndTime.format(
                                endMode === 'date' ? 'YYYY-MM-DD 23:59:59' : 'YYYY-MM-DD HH:mm:ss'
                            )) ||
                        '',
                    taskDesc: taskDesc && taskDesc.toHTML(),
                    relateLinkList: newLinkList,
                    noticeWayList: values.noticeWayList,
                    estimateWorkDuration: values.estimateWorkDuration && values.estimateWorkDuration * 60,
                    resourceRelation: uploadResource ? [uploadResource] : [],
                    fileList,
                    uploadResource,
                    remindDate: values.remindDate && values.remindDate.format('YYYY-MM-DD HH:mm:00')
                };

                if (onOk) onOk(params);
                setVisible(false);
            }
        });
    };

    const handleCancel = () => {
        if (onCancel) onCancel();
        setVisible(false);
    };

    const getEmployeeListAsync = async companyId => {
        const res = await getEmployeeList(companyId);
        if (res && res.code === 10000) {
            // console.log(res);
            const { data } = res;
            const arr = data.map(item => ({
                ...item,
                value: item.employeeCode,
                title: item.employeeName
            }));
            setEmployeeList(arr);
        }
    };

    const myUploadFn = param => {
        const onSuccess = (response, file) =>
            param.success({
                url: response.data[0].url,
                meta: {
                    id: file.name,
                    title: file.name,
                    alt: file.name
                }
            });
        customUpload({ files: param, onSuccess });
    };

    const handleTime = (value, type) => {
        if (type === 'start') {
            startDateRef.current = true;
            setStartDate(value.format(startMode === 'date' ? 'YYYY-MM-DD 00:00:00' : 'YYYY-MM-DD HH:mm:ss'));
        } else {
            endDateRef.current = true;
            setEndDate(value.format(endMode === 'date' ? 'YYYY-MM-DD 23:59:59' : 'YYYY-MM-DD HH:mm:ss'));
        }
    };
    const handleTimePanel = (value, mode, type) => {
        if (type === 'start') {
            setStartMode(mode);
        } else {
            setEndMode(mode);
        }
    };

    const handleTimeChange = (date, dateString, type) => {
        if (!dateString) {
            if (type === 'start') {
                startDateRef.current = false;
                setStartDate('');
            } else {
                endDateRef.current = false;
                setEndDate('');
            }
        } else {
            handleTime(date, type);
        }
    };

    const handleDateOpen = (type, status) => {
        if (status) {
            if (type === 'start') {
                if (!form.getFieldValue('planStartTime')) {
                    form.setFieldsValue({
                        planStartTime: moment()
                    });
                }
            } else if (type === 'end') {
                if (!form.getFieldValue('planEndTime')) {
                    form.setFieldsValue({
                        planEndTime: moment()
                    });
                }
            }
            return;
        }
        if (type === 'start') {
            if (!startDateRef.current) {
                form.setFieldsValue({
                    planStartTime: null
                });
            }
        } else if (type === 'end') {
            if (!endDateRef.current) {
                form.setFieldsValue({
                    planEndTime: null
                });
            }
        }
    };

    // 提前提醒-固定时间-时长选择
    const getRemindDuration = () =>
        getFieldDecorator('remindDuration', {
            initialValue: getPath(taskDetail, 'remindDuration', 10)
        })(
            <Select placeholder="请选择提醒时间" style={{ marginLeft: 8 }}>
                {[1, 5, 10, 15, 20, 25, 30].map(item => (
                    <Option key={item} value={item}>
                        {item}
                    </Option>
                ))}
            </Select>
        );
    // 提前提醒-固定时间-时长选择单位
    const getRemindDurationUnit = () =>
        getFieldDecorator('remindDurationUnit', {
            initialValue: getPath(taskDetail, 'remindDurationUnit', 1)
        })(
            <Select placeholder="请选择提醒周期" style={{ marginLeft: 8 }}>
                {[
                    { key: 1, value: '分钟' },
                    { key: 2, value: '小时' },
                    { key: 3, value: '天' }
                ].map(item => (
                    <Option key={item.key} value={item.key}>
                        {item.value}
                    </Option>
                ))}
            </Select>
        );

    const getRemindDate = () =>
        getFieldDecorator('remindDate', {
            rules: [
                {
                    required: true,
                    message: '请选择指定的时间'
                }
            ],
            initialValue: getPath(taskDetail, 'remindDate') ? moment(getPath(taskDetail, 'remindDate')) : null
        })(
            <DatePicker
                showTime
                placeholder="请选择指定的时间"
                allowClear
                format="YYYY-MM-DD HH:mm"
                style={{ marginLeft: 8 }}
            />
        );

    // 前置任务列表
    const fetchFrontList = async value => {
        const params = {
            taskId: getPath(taskDetail, 'frontTaskId', ''),
            taskName: value || ''
        };
        const result = await frontTask(params);

        if (result.code === 10000) {
            setFrontList(result.data);
        } else {
            message.error(result.msg);
        }
    };
    // 关联任务列表
    const fetchRelateTask = async value => {
        const params = { taskId: getPath(taskDetail, 'relateTaskId', ''), taskName: value || '' };
        const result = await relateTaskList(params);

        if (result.code === 10000) {
            setRelateTask(result.data);
        } else {
            message.error(result.msg);
        }
    };

    // 关联任务列表搜索
    const handleSearch = debounce(value => {
        fetchRelateTask(value);
    }, 200);
    const handleChangeRelate = debounce(value => {
        if (value === undefined) {
            fetchRelateTask();
        }
    }, 200);
    // 前置任务列表搜索
    const handleSearchFront = debounce(value => {
        fetchFrontList(value);
    }, 200);
    const handleChangeFront = debounce(value => {
        if (value === undefined) {
            fetchFrontList();
        }
    }, 200);

    const handleFileUpload = (showFileListReturn, uploadResourceReturn) => {
        // console.log('handleFileUpload -> showFileListReturn', showFileListReturn);
        // console.log('handleFileUpload -> uploadResourceReturn', uploadResourceReturn);
        setFileList(showFileListReturn);
        setUploadResource(uploadResourceReturn);
        if (showFileListReturn.length < 5) {
            setDisabled(false);
        } else {
            setDisabled(true);
        }
    };

    const handleEditorChange = editorState => {
        const html = editorState.toHTML();
        if (html.length > 20000) {
            message.error('任务描述内容过多');
        }
    };

    React.useEffect(() => {
        // 第一次不运行;
        if (isFirstRun.current) {
            isFirstRun.current = false;
            return;
        }
        const time = form.getFieldValue('estimateWorkDuration');
        const newTime = time * 60;
        setWorkTime(TimeFormatForm(newTime));
    }, [JSON.stringify(form.getFieldValue('estimateWorkDuration'))]);

    React.useEffect(() => {
        setAdvanceAlert(form.getFieldValue('remindType'));
    }, [JSON.stringify(form.getFieldValue('remindType'))]);

    React.useEffect(() => {
        if (!visible) {
            return;
        }
        fetchFrontList();
        fetchRelateTask();
        setStartMode(
            getPath(taskDetail, 'planStartTime') && getPath(taskDetail, 'planStartTime').indexOf('00:00:00') === -1
                ? 'time'
                : 'date'
        );
        setEndMode(
            getPath(taskDetail, 'planEndTime') && getPath(taskDetail, 'planEndTime').indexOf('23:59:59') === -1
                ? 'time'
                : 'date'
        );
        setStartDate(getPath(taskDetail, 'planStartTime') || '');
        setEndDate(getPath(taskDetail, 'planEndTime') || '');
        if (getPath(taskDetail, 'estimateWorkDuration')) {
            setWorkTime(TimeFormatForm(getPath(taskDetail, 'estimateWorkDuration')));
        }
        // 附件
        setFileList([]);
        setUploadResource(null);
        if (getPath(taskDetail, 'attachmentList')) {
            const filesList = [];
            const files = getPath(taskDetail, 'attachmentList') || [];
            files.forEach(item => {
                const { originName, url, keyName } = item;
                const fileObj = {
                    uid: keyName,
                    keyName,
                    name: originName,
                    oldName: originName,
                    url
                };
                filesList.push(fileObj);
            });
            setFileList(filesList);
            if (filesList.length >= 5) {
                setDisabled(true);
            }
        } else if (getPath(taskDetail, 'fileList')) {
            const filesListTemp = [];
            const files = getPath(taskDetail, 'fileList') || [];
            files.forEach(item => {
                const { name, uid } = item;
                const fileObj = {
                    uid,
                    keyName: uid,
                    name,
                    oldName: name
                };
                filesListTemp.push(fileObj);
            });
            setFileList(filesListTemp);
            setUploadResource(getPath(taskDetail, 'uploadResource'));
            if (fileList.length >= 5) {
                setDisabled(true);
            }
        } else {
            setFileList([]);
            // setUploadResource(null);
            setDisabled(false);
        }
    }, [visible]);

    React.useEffect(() => {
        getEmployeeListAsync(user.companyId);
    }, [user.companyId]);

    const controls = [
        'undo',
        'redo',
        'separator',
        'font-size',
        'line-height',
        'letter-spacing',
        'separator',
        'text-color',
        'bold',
        'italic',
        'underline',
        'strike-through',
        'separator',
        'superscript',
        'subscript',
        'remove-styles',
        'emoji',
        'separator',
        'text-indent',
        'text-align',
        'separator',
        'headings',
        'list-ul',
        'list-ol',
        'blockquote',
        'code',
        'separator',
        'media',
        'link',
        'hr',
        'separator',
        'clear'
    ];

    return (
        <Modal
            title="新增子任务-更多信息"
            width={980}
            // centered
            visible={visible}
            onOk={handleOk}
            destroyOnClose
            keyboard={false}
            maskClosable={false}
            onCancel={handleCancel}
        >
            <Form {...formLayout} style={{ width: '98%', marginTop: 24 }}>
                <FormContainer gutter={24}>
                    <Form.Item label="任务名称" vvspan={24} labelCol={{ md: 3 }} wrapperCol={{ md: 21 }}>
                        {getFieldDecorator('taskName', {
                            rules: [
                                {
                                    required: true,
                                    message: '请输入任务名称'
                                },
                                {
                                    min: 1,
                                    max: 200,
                                    message: '不超过200个字!'
                                },
                                { whitespace: true, message: '请输入任务名称' }
                            ],
                            initialValue: getPath(taskDetail, 'taskName', '')
                        })(<Input placeholder="请输入任务名称" allowClear></Input>)}
                    </Form.Item>
                    <Form.Item label="执行人">
                        {getFieldDecorator('executeEmployeeCode', {
                            rules: [
                                {
                                    required: true,
                                    message: '请输入执行人名称'
                                },
                                {
                                    validator(_, value, callback) {
                                        const auditId = form.getFieldValue('auditEmployeeCode');
                                        const acceptId = form.getFieldValue('acceptanceEmployeeCode');
                                        if (value && auditId && value === auditId) {
                                            return callback('不可与审核人重复');
                                        }
                                        if (value && acceptId && value === acceptId) {
                                            return callback('不可与验收人重复');
                                        }
                                        return callback();
                                    }
                                }
                            ],
                            initialValue: getPath(taskDetail, 'executeEmployeeCode', user.employeeCode)
                        })(
                            <TreeSelect
                                showSearch
                                allowClear
                                dropdownClassName={styles.fixedSelect}
                                dropdownStyle={{ maxHeight: 250, overflow: 'auto' }}
                                getPopupContainer={trigger => trigger.parentNode}
                                treeDefaultExpandAll
                                treeNodeFilterProp="title"
                                treeData={employeeList}
                                suffixIcon={<Icon type="user" />}
                                placeholder="请选择执行人"
                            ></TreeSelect>
                        )}
                    </Form.Item>
                    <Form.Item label="优先级">
                        {getFieldDecorator('taskPriority', {
                            rules: [
                                {
                                    required: true,
                                    message: '请选择'
                                }
                            ],
                            initialValue: getPath(taskDetail, 'taskPriority', 1) || 1
                        })(
                            <Select placeholder="请选择">
                                {TaskPriorityList.map(item => (
                                    <Option value={item.value} key={item.value}>
                                        {item.text}
                                    </Option>
                                ))}
                            </Select>
                        )}
                    </Form.Item>
                    <Form.Item label="开始时间">
                        {getFieldDecorator('planStartTime', {
                            rules: [
                                {
                                    validator(_, value, callback) {
                                        if (value && form.getFieldValue('planEndTime')) {
                                            const endTime = form
                                                .getFieldValue('planEndTime')
                                                .format(
                                                    endMode === 'date' ? 'YYYY-MM-DD 23:59:59' : 'YYYY-MM-DD HH:mm:ss'
                                                );
                                            const newValue = value.format(
                                                startMode === 'date' ? 'YYYY-MM-DD 00:00:00' : 'YYYY-MM-DD HH:mm:ss'
                                            );
                                            if (endTime && moment(newValue) > moment(endTime)) {
                                                return callback('不可大于截止时间');
                                            }
                                            return callback();
                                        }
                                        return callback();
                                    }
                                }
                            ],
                            initialValue: getPath(taskDetail, 'planStartTime')
                                ? moment(getPath(taskDetail, 'planStartTime'))
                                : null
                        })(
                            <DatePicker
                                style={{ width: '100%' }}
                                showTime
                                placeholder="请输入开始时间"
                                format={startMode === 'date' ? 'MM-DD' : 'MM-DD HH:mm'}
                                onOk={e => handleTime(e, 'start')}
                                onChange={(e1, e2) => handleTimeChange(e1, e2, 'start')}
                                onPanelChange={(e1, e2) => handleTimePanel(e1, e2, 'start')}
                                onOpenChange={status => handleDateOpen('start', status)}
                            />
                        )}
                    </Form.Item>
                    <Form.Item label="截止时间">
                        {getFieldDecorator('planEndTime', {
                            rules: [
                                {
                                    required: true,
                                    message: '请输入截止时间'
                                },
                                {
                                    validator(_, value, callback) {
                                        if (value && form.getFieldValue('planStartTime')) {
                                            const startTime = form
                                                .getFieldValue('planStartTime')
                                                .format(
                                                    startMode === 'date' ? 'YYYY-MM-DD 00:00:00' : 'YYYY-MM-DD HH:mm:ss'
                                                );
                                            const newValue = value.format(
                                                endMode === 'date' ? 'YYYY-MM-DD 23:59:59' : 'YYYY-MM-DD HH:mm:ss'
                                            );
                                            if (startTime && moment(newValue) < moment(startTime)) {
                                                return callback('不可小于开始时间');
                                            }
                                            return callback();
                                        }
                                        // if (value && parentEndTime) {
                                        //     if (value.isAfter(parentEndTime)) {
                                        //         const str = moment(parentEndTime).format(
                                        //             parentEndTime.indexOf('23:59:59') !== -1
                                        //                 ? 'YYYY-MM-DD'
                                        //                 : 'YYYY-MM-DD HH:mm'
                                        //         );
                                        //         return callback(`不可大于上级任务截止时间${str}`);
                                        //     }
                                        // }
                                        return callback();
                                    }
                                }
                            ],
                            initialValue: getPath(taskDetail, 'planEndTime')
                                ? moment(getPath(taskDetail, 'planEndTime'))
                                : null
                        })(
                            <DatePicker
                                style={{ width: '100%' }}
                                showTime
                                placeholder="请输入截止时间"
                                format={endMode === 'date' ? 'MM-DD' : 'MM-DD HH:mm'}
                                onOk={e => handleTime(e, 'end')}
                                onChange={(e1, e2) => handleTimeChange(e1, e2, 'end')}
                                onPanelChange={(e1, e2) => handleTimePanel(e1, e2, 'end')}
                                onOpenChange={status => handleDateOpen('end', status)}
                            />
                        )}
                    </Form.Item>
                    <Form.Item label="审核人">
                        {getFieldDecorator('auditEmployeeCode', {
                            rules: [
                                {
                                    validator(_, value, callback) {
                                        const executeId = form.getFieldValue('executeEmployeeCode');
                                        if (value === user.employeeCode) {
                                            return callback('不可选自己');
                                        }
                                        if (value && executeId && value === executeId) {
                                            return callback('不可与执行人重复');
                                        }
                                        return callback();
                                    }
                                }
                            ],
                            initialValue: getPath(taskDetail, 'auditEmployeeCode') || undefined
                        })(
                            <TreeSelect
                                showSearch
                                allowClear
                                dropdownClassName={styles.fixedSelect}
                                dropdownStyle={{ maxHeight: 250, overflow: 'auto' }}
                                getPopupContainer={trigger => trigger.parentNode}
                                treeDefaultExpandAll
                                treeNodeFilterProp="title"
                                treeData={employeeList}
                                suffixIcon={<i className="icon iconfont iconshenheren1" style={{ fontSize: '12px' }} />}
                                placeholder="请选择审核人"
                            ></TreeSelect>
                        )}
                    </Form.Item>
                    <Form.Item label="验收人">
                        {getFieldDecorator('acceptanceEmployeeCode', {
                            rules: [
                                {
                                    validator(_, value, callback) {
                                        const executeId = form.getFieldValue('executeEmployeeCode');
                                        if (value && executeId && value === executeId) {
                                            return callback('不可与执行人重复');
                                        }
                                        return callback();
                                    }
                                }
                            ],
                            initialValue: getPath(taskDetail, 'acceptanceEmployeeCode') || undefined
                        })(
                            <TreeSelect
                                showSearch
                                allowClear
                                dropdownClassName={styles.fixedSelect}
                                dropdownStyle={{ maxHeight: 250, overflow: 'auto' }}
                                getPopupContainer={trigger => trigger.parentNode}
                                treeDefaultExpandAll
                                treeNodeFilterProp="title"
                                treeData={employeeList}
                                placeholder="请选择验收人"
                                suffixIcon={
                                    <i className="icon iconfont iconyanshouren1" style={{ fontSize: '12px' }} />
                                }
                            ></TreeSelect>
                        )}
                    </Form.Item>
                    <Form.Item label="参与人" vvspan={24} labelCol={{ md: 3 }} wrapperCol={{ md: 21 }}>
                        {getFieldDecorator('participantEmployeeCodeList', {
                            initialValue: getPath(taskDetail, 'participantEmployeeCodeList') || []
                        })(
                            <TreeSelect
                                multiple
                                showArrow
                                allowClear
                                showSearch
                                maxTagCount={10}
                                suffixIcon={<Icon type="user" />}
                                placeholder="请选择参与人"
                                dropdownClassName={styles.fixedSelect}
                                dropdownStyle={{ maxHeight: 250, overflow: 'auto' }}
                                getPopupContainer={trigger => trigger.parentNode}
                                treeDefaultExpandAll
                                treeNodeFilterProp="title"
                                treeData={employeeList}
                            ></TreeSelect>
                        )}
                    </Form.Item>
                    <Form.Item label="预估工时">
                        {getFieldDecorator('estimateWorkDuration', {
                            initialValue: getPath(taskDetail, 'estimateWorkDuration') / 60 || undefined
                        })(
                            <InputNumber
                                min={0}
                                max={9999.9}
                                placeholder="请输入"
                                precision={1}
                                formatter={value => `${value}`.replace('.0', '')}
                                style={{ width: 140 }}
                            />
                        )}
                        &nbsp;&nbsp;&nbsp;&nbsp;{workTime}
                    </Form.Item>
                    <Form.Item label="通用类型">
                        {getFieldDecorator('generalType', {
                            initialValue: getPath(taskDetail, 'generalType', undefined)
                        })(
                            <Select placeholder="请选择通用类型" style={{ width: '100%' }} allowClear>
                                {[
                                    { value: '会议', key: 1 },
                                    { value: '培训', key: 2 },
                                    { value: '团建', key: 3 },
                                    { value: '学习', key: 4 },
                                    { value: '其他', key: 99 }
                                ].map(item => (
                                    <Option key={item.key} value={item.key}>
                                        {item.value}
                                    </Option>
                                ))}
                            </Select>
                        )}
                    </Form.Item>
                    <Form.Item label="提前提醒">
                        <div style={{ display: 'flex', paddingTop: 4 }}>
                            {getFieldDecorator('remindType', {
                                initialValue: getPath(taskDetail, 'remindType', 0)
                            })(
                                <Select placeholder="请选择提醒方式">
                                    {[
                                        { value: '不提醒', key: 0 },
                                        { value: '固定时间', key: 1 }
                                        // { value: '指定时间', key: 2 }
                                    ].map(item => (
                                        <Option key={item.key} value={item.key}>
                                            {item.value}
                                        </Option>
                                    ))}
                                </Select>
                            )}
                            {advanceAlert === 1 && getRemindDuration()}
                            {advanceAlert === 1 && getRemindDurationUnit()}
                            {advanceAlert === 2 && getRemindDate()}
                        </div>
                    </Form.Item>
                    <Form.Item label="通知方式">
                        {getFieldDecorator('noticeWayList', {
                            initialValue: getPath(taskDetail, 'noticeWayList', [])
                        })(
                            <Checkbox.Group
                                options={[
                                    // { label: 'IM消息', value: 1 },
                                    { label: '系统消息', value: 2 },
                                    { label: '邮箱', value: 3 }
                                    // { label: '短信', value: 4 }
                                ]}
                            />
                        )}
                    </Form.Item>
                    <Form.Item label="前置任务" vvspan={24} labelCol={{ md: 3 }} wrapperCol={{ md: 21 }}>
                        {getFieldDecorator('frontTaskId', {
                            initialValue: getPath(taskDetail, 'frontTaskId', undefined)
                        })(
                            <Select
                                placeholder="请选择前置任务"
                                allowClear
                                showSearch
                                dropdownClassName={styles.fixedSelect}
                                dropdownStyle={{ maxHeight: 250, overflow: 'auto' }}
                                getPopupContainer={trigger => trigger.parentNode}
                                onSearch={handleSearchFront}
                                onChange={handleChangeFront}
                                filterOption={false}
                                optionLabelProp="label"
                            >
                                {frontList.map(item => (
                                    <Option key={item.taskId} value={item.taskId} label={item.taskName}>
                                        <TaskListItem data={item} />
                                    </Option>
                                ))}
                                {frontList && frontList.length > 0 && (
                                    <Option key="tips" value={undefined} label="" disabled>
                                        更多数据请输入关键字模糊搜索
                                    </Option>
                                )}
                            </Select>
                        )}
                    </Form.Item>
                    <Form.Item label="关联任务" vvspan={24} labelCol={{ md: 3 }} wrapperCol={{ md: 21 }}>
                        {getFieldDecorator('relateTaskId', {
                            initialValue: getPath(taskDetail, 'relateTaskId', undefined)
                        })(
                            <Select
                                placeholder="请选择关联任务"
                                allowClear
                                showSearch
                                dropdownClassName={styles.fixedSelect}
                                dropdownStyle={{ maxHeight: 250, overflow: 'auto' }}
                                getPopupContainer={trigger => trigger.parentNode}
                                onSearch={handleSearch}
                                onChange={handleChangeRelate}
                                filterOption={false}
                                optionLabelProp="label"
                            >
                                {relateTask.map(item => (
                                    <Option key={item.taskId} value={item.taskId} label={item.taskName}>
                                        <TaskListItem data={item} />
                                    </Option>
                                ))}
                                {relateTask && relateTask.length > 0 && (
                                    <Option key="tips" value={undefined} label="" disabled>
                                        更多数据请输入关键字模糊搜索
                                    </Option>
                                )}
                            </Select>
                        )}
                    </Form.Item>
                    <Form.Item
                        label="关联链接"
                        vvspan={24}
                        labelCol={{ md: 3 }}
                        wrapperCol={{ md: 21 }}
                        style={{ marginBottom: '0' }}
                    >
                        {getFieldDecorator('relateLinkList', {
                            validateTrigger: ['onChange', 'onBlur'],
                            rules: [
                                {
                                    validator(_, value, callback) {
                                        value.some(item => {
                                            const errorMessage = linkRef.current.getValidateError(item.link);
                                            if (errorMessage) {
                                                callback(errorMessage);
                                                return true;
                                            }
                                            return false;
                                        });
                                        callback();
                                    }
                                }
                            ],
                            initialValue: relativeLinkData
                        })(<RelativeLink ref={linkRef} />)}
                    </Form.Item>
                    <Form.Item label="关联附件" vvspan={24} labelCol={{ md: 3 }} wrapperCol={{ md: 21 }}>
                        <FileUpload
                            setFileList={handleFileUpload}
                            checkFileSizeMsg="文件大小不能超过50MB！"
                            checkFileSize={50}
                            fileList={fileList}
                            uploadResource={uploadResource}
                            categoryCode="attachmentList"
                            checkFileType="TXT,DOC,DOCX,XLS,XLSX,PPT,PPTX,PDF,EDC,SSP,DWG,EDCS,
                                    BMP,JPG,PNG,TIF,GIF,PCX,TGA,EXIF,FPX,SVG,PSD,CDR,PCD,DXF,UFO,EPS,AI,
                                    RAW,WMF,WEBP,Xmind,ZIP,rar,zip,CAB,ARJ,LZH,TAR,GZ,ACE,UUE,BZ2,JAR,ISO,rp"
                            checkFileTypeMsg="附件格式不合规，请确认！"
                        >
                            <Button type="link" disabled={disabled} style={{ padding: '0' }}>
                                添加附件
                            </Button>
                        </FileUpload>
                    </Form.Item>
                    <Form.Item label="描述" vvspan={24} labelCol={{ md: 3 }} wrapperCol={{ md: 21 }}>
                        {getFieldDecorator('taskDesc', {
                            initialValue: getPath(taskDetail, 'taskDesc')
                                ? BraftEditor.createEditorState(`${getPath(taskDetail, 'taskDesc')}`)
                                : BraftEditor.createEditorState(null)
                        })(
                            <BraftEditor
                                media={{
                                    uploadFn: myUploadFn,
                                    validateFn: myValidateFn,
                                    accepts: {
                                        image: 'image/png,image/jpeg,image/gif'
                                    }
                                }}
                                onChange={handleEditorChange}
                                placeholder="请输入任务描述"
                                controls={controls}
                                excludeControls={['fullscreen']}
                                imageControls={[
                                    {
                                        onClick: block => {
                                            console.log(block);
                                        } // 指定控件点击后的回调，参数为当前图片的block对象
                                    },
                                    'align-left',
                                    'align-center',
                                    'align-right',
                                    'size',
                                    'remove'
                                ]}
                                style={{
                                    border: '1px solid #d9d9d9',
                                    borderTopWidth: '1.02px',
                                    borderRadius: '4px',
                                    marginTop: '4px'
                                }}
                            />
                        )}
                    </Form.Item>
                </FormContainer>
            </Form>
        </Modal>
    );
};

export default connect(({ user }) => ({ user: user.currentUser }))(Form.create()(ChildTaskMore));
